//################################
// 版权所有：中国农业银行软件开发中心
// 系统名称：移动办公应用-手机版
// 文件名称：index.js
// 创建时间：2016年10月30日
// 创建人员：Panda
// 功能说明：可展开、收合的缩略Text组件
//################################

'use strict';

import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    StyleSheet,
} from 'react-native';

import {
    Colors,
} from '../../common';

import Icon from 'react-native-vector-icons/FontAwesome';

const UP = 'angle-double-up';
const DOWN = 'angle-double-down';

const MIN_NUMBER_OF_LINES = 1;
const MAX_NUMBER_OF_LINES = 100;

class PandaExpandableText extends Component {
    constructor(props) {
        super(props);

        this.onTextPress = this.onTextPressFunc.bind(this);
        this.onUpButtonPress = this.onUpButtonPressFunc.bind(this);
        this.onLayout = this.onLayoutFunc.bind(this);

        this.singleLineHeight = 0;
        
        this.state = {
            isExpand: false,
            numberOfLines: MIN_NUMBER_OF_LINES,
            iconName: UP,
        }
    }

    onTextPressFunc() {
        if (this.state.isExpand) {
            return;
        }
        else {
            this.setState({
                // isExpand: true,
                numberOfLines: MAX_NUMBER_OF_LINES,
            });
        }
    }

    onUpButtonPressFunc() {
        this.setState({
            isExpand: false,
            numberOfLines: MIN_NUMBER_OF_LINES,
        });
    }

    onLayoutFunc(args) {
        if (this.singleLineHeight === 0) {
            this.singleLineHeight = args.nativeEvent.layout.height;
        }
        else {
            if (this.singleLineHeight === args.nativeEvent.layout.height) {
                this.setState({
                    isExpand: false,
                    numberOfLines: MIN_NUMBER_OF_LINES,
                });
            }
            else {
                this.setState({
                    isExpand: true,
                });
            }
        }
    }
    
    render() {
        return (
            <View onLayout={this.onLayout} style={styles.container}>
                <Text style={[this.props.textStyle]} ellipsizeMode={'tail'} numberOfLines={this.state.numberOfLines} onPress={this.onTextPress}>{this.props.text}</Text>
                {
                    this.state.isExpand ? 
                    <TouchableOpacity style={styles.button} onPress={this.onUpButtonPress}>
                        <Icon name={this.state.iconName} size={24} color={Colors.green} /> 
                    </TouchableOpacity>
                    :
                    null
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
    },
    button: {
        width: 24, 
        alignSelf: 'flex-start', 
        alignItems: 'center', 
        justifyContent: 'center',
    },
});

export default PandaExpandableText;